<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>find</title>
    <script th:src="@{/js/axios.js}"></script>
    <script th:src="@{/js/vue.js}"></script>
    <link rel="stylesheet" th:href="@{/js/el/theme-chalk/index.css}">
    <script th:src="@{/js/el/index.js}"></script>
</head>
<body>
    <div id="app">
        <el-container style="height:1000px;" >
            <el-header style="height:7%;padding: 0px;   ">
                <div th:include="~{common/head-fore::headFore}">

                </div>
            </el-header>
            <el-container>
                <el-main>
                    <div style="width:100%; height:100% ;text-align: center" >
                        <div style="width:100%; height:auto;" >
                            <h2>{{blog.blogs.title}}</h2>
                            <p>
                                <h3>
                                    作者:{{blog.blogs.author}}&nbsp;&nbsp;&nbsp;&nbsp;
                                    点赞:{{blog.blogs.hits}}&nbsp;&nbsp;&nbsp;&nbsp;
                                    发布日期:{{blog.blogs.date}}&nbsp;&nbsp;&nbsp;&nbsp;
                                    栏目:{{type.name}}
                                </h3>

                            </p>
                        </div>
                        <hr>
                        <div style="width:80%; height:auto;border: 1px solid black;margin-left:12%">
                            <div v-html="blog.content.body" style="height: auto">

                            </div>
                        </div>
                        <div style="height:auto;border: 1px solid royalblue">
                            评论...
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>

    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                    blog: {blogs:{title:null},content:{body:null}},
                    type:{name:null}
            }
        },
        methods:{
            userClick(item){
                if(item == "my"){
                    window.location.href="/api/user/goUserInfo"
                }
                if(item == "addBlog"){
                    window.location.href="/api/blogs/goAdd"
                }
                if(item == "loginOut"){
                    axios.get("/logout").then(
                        function (resp) {
                            window.location.href=resp.data.action
                        }
                    )
                }
            },
            goIndex(){
                window.location.href="/api/public/goIndex"
            },
            del(){
                var id = sessionStorage.getItem("blogid")
                axios.get("/api/blogs/delById/"+id).then(
                    function (resp) {
                        window.location.href="/api/user/goUserInfo"
                    }
                )
            }
        },
        mounted(){
            var that = this
            var id = sessionStorage.getItem("blogid")
            axios.get("/api/public/blogs/findById/"+id).then(
                function (resp1) {
                    that.blog = resp1.data.data
                    console.log(that.blog)
                    axios.get("/api/public/type/findById/"+resp1.data.data.blogs.typeid).then(
                        function (resp) {
                            that.type = resp.data.data
                        }
                    )
                }
            )
        }
    })
</script>
</html>